<template>
	<view class='my-order bg-active-color'>
		<Lines></Lines>
		<view class='order-header'>
			<view class='header-item' v-for='(item,index) in tabList' :key='index'
				:class=' tabIndex==index?"active":""  ' @tap='changeTab(index)'>{{item.name}}</view>
		</view>

		<block v-for='(tabItem,tabI) in tabList' :key='tabI'>
			<view v-show='tabI===tabIndex'>
				<view v-if='tabItem.list.length > 0'>
					<!--商品-->
					<view class="order-box" v-for='(k,i) in tabItem.list' :key='i'>
						<view class='order-goods'>
							<view class='goods-status f-active-color'>{{ k.status | changeStatus }}</view>
							<scroll-view class='order-main' scroll-y :style="'height:'+clentHeight+'px;'"
								@scrolltolower="onPageNum">
								<view class='goods-item' v-for='(item,index) in k.goods_item'>
									<OrderList :item='item' :index='index' @click='goPayment'></OrderList>
								</view>
							</scroll-view>

						</view>
						<!--支付-->
						<!-- <view class='payment'>
							<view class='total-price'>
								订单金额: <text class='f-active-color'>¥{{k.totalPrice}}</text> (包含运费¥0.00)
							</view>
							<view class='payment-text f-active-color'>支付</view>
						</view> -->
					</view>
				</view>

				<view v-else class='no-order' :style="'height:'+clentHeight+'px;'">
					<view>您还没有相关订单</view>
					<view class='no-order-home'>去首页逛逛</view>
				</view>

			</view>
		</block>
	</view>
</template>

<script>
	import Lines from '@/components/common/Lines.vue'
	import OrderList from '@/components/order/order-list.vue'
	import {
		getOrderList,
		orderGoods
	} from "@/api/order.js"
	import {
		mapGetters,
		mapState,
		mapMutations
	} from 'vuex'
	
	export default {
		data() {
			return {
				//高度
				clentHeight: 0,
				//当前位置
				tabIndex: 0,
				pageSize: 8,
				pageNum: 1,
				status: 0,
				//顶部选项卡的数据
				tabList: [{
						name: "全部",
						list: []
					},
					{
						name: "待付款",
						list: []
					},
					{
						name: "待发货",
						list: []
					},
					{
						name: "待收货",
						list: []
					},
					{
						name: "待评价",
						list: []
					},
				]
			}
		},
		async onLoad() {
			this.getOrder()
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.clentHeight = res.windowHeight - this.getClientHeight() - uni.upx2px(120);
				}
			})
		},
		components: {
			Lines,
			OrderList
		},
		methods: {
			...mapMutations(['initGetData', 'setSelectList']),
			async getOrder() {
				let oldlist = this.tabList[this.tabIndex].list != '' ? this.tabList[this.tabIndex].list[0].goods_item :
					[]
				let res = await getOrderList({
					orderStatus: this.status,
					pageSize: this.pageSize,
					pageNum: this.pageNum
				})
				// console.log(res);
				if (res[0].goods_item == '') {
					return this.pageSize = '已经到底了~'
				}
				let newlist = [...oldlist, ...res[0].goods_item]
				res[0].goods_item = newlist
				this.tabList[this.tabIndex].list = res
			},
			onPageNum() {
				if (typeof this.pageSize == 'string') {
					return uni.showToast({
						title: this.pageSize,
						duration: 2000,
						icon: 'none'
					})
				}
				this.pageNum++
				this.getOrder()
			},
			//顶部切换
			changeTab(index) {
				this.tabIndex = index;
				this.status = this.$options.filters['changeStatus'](this.tabList[index].name)
				this.pageNum = 1
				this.pageSize = 8
				this.tabList[index].list = []
				this.getOrder()
			},
			//获取可视区域高度【兼容】
			getClientHeight() {
				const res = uni.getSystemInfoSync();
				const system = res.platform;
				if (system === 'ios') {
					return 44 + res.statusBarHeight;
				} else if (system === 'android') {
					return 48 + res.statusBarHeight;
				} else {
					return 0;
				}
			},
			async goPayment(e){
				if(e.order_status == '1'){
					let idArr = []
					let goodsNameArr = e.goods_name.split(',')
					let res = await orderGoods(goodsNameArr)
					// console.log(e);
					res.forEach(v=>{
						idArr.push(v.id)
					})
					this.initGetData(res)
					this.setSelectList(idArr)
					uni.navigateTo({
						url: `../confirm-order/confirm-order?pprice=${e.goods_price}`
					})
				}
			}
		}
	}
</script>

<style scoped>
	.no-order {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
	}

	.no-order-home {
		padding: 6rpx 60rpx;
		border: 2rpx solid #49BDFB;
		color: #49BDFB;
		border-radius: 40rpx;
	}

	.order-header {
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 2rpx solid #F7F7F7;
	}

	.header-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
	}

	.active {
		border-bottom: 4rpx solid #49BDFB;
	}


	.goods-status {
		display: flex;
		justify-content: flex-end;
		background-color: #FFFFFF;
		padding: 20rpx;
	}

	.total-price {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		background-color: #FFFFFF;
		padding-right: 20rpx;
	}

	.order-box {
		position: relative;
		height: 100%;
		/* border-bottom: 1rpx solid black; */
	}

	.order-main {
		padding-bottom: 100rpx;
		box-sizing: border-box;
	}

	.payment {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: flex-end;
		background-color: #FFFFFF;
		padding: 20rpx;
		border-top: 1rpx solid #ccc;
		box-sizing: border-box;
	}

	.payment-text {
		border: 2rpx solid #49BDFB;
		padding: 6rpx 40rpx;
		border-radius: 30rpx;
	}
</style>
